<template>
  <div class="osd-config">
    <a-form :model="formState" layout="vertical">
      <a-card title="时间水印" :bordered="false">
        <a-form-item name="timeStampEnabled">
          <a-switch v-model:checked="formState.timeStampEnabled" checked-children="开启" un-checked-children="关闭" />
        </a-form-item>

        <template v-if="formState.timeStampEnabled">
          <a-form-item label="时间格式" name="timeFormat">
            <a-radio-group v-model:value="formState.timeFormat">
              <a-radio value="24">24小时制</a-radio>
              <a-radio value="12">12小时制</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="显示位置" name="timePosition">
            <a-select v-model:value="formState.timePosition">
              <a-select-option value="topLeft">左上角</a-select-option>
              <a-select-option value="topRight">右上角</a-select-option>
              <a-select-option value="bottomLeft">左下角</a-select-option>
              <a-select-option value="bottomRight">右下角</a-select-option>
            </a-select>
          </a-form-item>
        </template>
      </a-card>

      <a-card title="文字水印" :bordered="false" style="margin-top: 16px">
        <a-form-item name="textEnabled">
          <a-switch v-model:checked="formState.textEnabled" checked-children="开启" un-checked-children="关闭" />
        </a-form-item>

        <template v-if="formState.textEnabled">
          <a-form-item label="水印内容" name="textContent">
            <a-input v-model:value="formState.textContent" placeholder="请输入水印内容" />
          </a-form-item>

          <a-form-item label="显示位置" name="textPosition">
            <a-select v-model:value="formState.textPosition">
              <a-select-option value="topLeft">左上角</a-select-option>
              <a-select-option value="topRight">右上角</a-select-option>
              <a-select-option value="bottomLeft">左下角</a-select-option>
              <a-select-option value="bottomRight">右下角</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="字体大小" name="fontSize">
            <a-slider v-model:value="formState.fontSize" :min="12" :max="48" :marks="{
              12: '12px',
              24: '24px',
              36: '36px',
              48: '48px'
            }" :step="12" />
          </a-form-item>

          <a-form-item label="字体颜色" name="fontColor">
            <a-radio-group v-model:value="formState.fontColor">
              <a-radio value="white">白色</a-radio>
              <a-radio value="black">黑色</a-radio>
              <a-radio value="red">红色</a-radio>
              <a-radio value="yellow">黄色</a-radio>
            </a-radio-group>
          </a-form-item>
        </template>
      </a-card>

      <a-card title="隐私遮罩" :bordered="false" style="margin-top: 16px">
        <a-form-item name="privacyMaskEnabled">
          <a-switch v-model:checked="formState.privacyMaskEnabled" checked-children="开启" un-checked-children="关闭" />
        </a-form-item>

        <template v-if="formState.privacyMaskEnabled">
          <a-form-item label="遮罩区域" name="maskAreas">
            <a-alert message="请在预览画面中框选需要遮罩的区域" type="info" show-icon style="margin-bottom: 16px" />
            <div class="preview-area">
              <!-- 这里可以添加预览画面和遮罩选择功能 -->
              <div class="preview-placeholder">
                预览画面
              </div>
            </div>
          </a-form-item>

          <a-form-item label="遮罩颜色" name="maskColor">
            <a-radio-group v-model:value="formState.maskColor">
              <a-radio value="black">黑色</a-radio>
              <a-radio value="mosaic">马赛克</a-radio>
            </a-radio-group>
          </a-form-item>
        </template>
      </a-card>

      <div style="margin-top: 16px">
        <a-space>
          <a-button type="primary" @click="handleSubmit">保存设置</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-space>
      </div>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'OSDConfig',
  setup() {
    const defaultSettings = {
      timeStampEnabled: true,
      timeFormat: '24',
      timePosition: 'topRight',
      textEnabled: false,
      textContent: '',
      textPosition: 'bottomRight',
      fontSize: 24,
      fontColor: 'white',
      privacyMaskEnabled: false,
      maskAreas: [],
      maskColor: 'black'
    };

    const formState = reactive({ ...defaultSettings });

    const handleSubmit = async () => {
      try {
        // 这里添加实际的API调用
        message.success('OSD设置已保存');
      } catch (error) {
        message.error('保存失败，请重试');
      }
    };

    const handleReset = () => {
      Object.assign(formState, defaultSettings);
      message.info('已重置为默认设置');
    };

    return {
      formState,
      handleSubmit,
      handleReset
    };
  }
});
</script>

<style scoped>
.osd-config {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.preview-area {
  width: 100%;
  height: 300px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  overflow: hidden;
}

.preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  color: #999;
}
</style>
